<template>
  <div class="inner-page">
    <div class="inner-page-title flex-row flex-space-between mb-30">
      <div class="flex-row">
        <span>数据传输服务TeleDB-DTS </span>
        <div class="page-arrow">
          <span :class="{ active: tab == 0 }" @click="tab = 0"
            ><i class="el-icon-arrow-left"></i
          ></span>
          <span :class="{ active: tab == 1 }" @click="tab = 1"
            ><i class="el-icon-arrow-right"></i
          ></span>
        </div>
      </div>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <tab1 v-show="tab == 0"></tab1>
    <tab2 v-show="tab == 1"></tab2>
  </div>
</template>

<script>
import Tab1 from './components/tab-11-1'
import Tab2 from './components/tab-11-2'
export default {
  name: 'nav11',
  components: {
    Tab1,
    Tab2
  },
  data () {
    return {
      tab: '0'
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
.page-arrow {
  margin-left: 30px;
  span {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    line-height: 24px;
    margin: 0 5px;
    &.active {
      background: rgba(255, 255, 255, 0.6);
    }
  }
}
</style>
